<template>
  <div class="messages-view">
    <!-- 顶部标题 -->
    <div class="top-bar">
      <div class="bar-item placeholder"></div>
      <div class="bar-item title">消息</div>
      <div class="bar-item discover" @click="toggleMenu">
        <svg
          class="icon-add"
          viewBox="0 0 18 18"
          width="20"
          height="20"
          fill="none"
          aria-hidden="true"
          stroke="#222"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <line x1="9" y1="3" x2="9" y2="15" />
          <line x1="3" y1="9" x2="15" y2="9" />
        </svg>
      </div>
    </div>

    <!-- 顶部功能按钮 -->
    <div class="top-actions">
      <div class="action-item">
        <div class="icon">
          <!-- 好友图标 -->
          <svg class="action-icon" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
            <circle cx="9" cy="7" r="4"></circle>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
        </div>
        <span class="friend-text">好友</span>
      </div>
      <div class="action-item">
        <div class="icon">
          <!-- 留言图标 -->
          <svg class="action-icon" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
          </svg>
        </div>
        <span class="friend-text">留言</span>
      </div>
      <div class="action-item">
        <div class="icon">
          <!-- 评论和@图标 -->
          <svg class="action-icon" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
            <line x1="17" y1="8" x2="17" y2="12"></line>
          </svg>
        </div>
        <span class="friend-text">评论和@</span>
      </div>
    </div>

    <!-- 消息列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        v-for="(message, index) in sortedMessages"
        :key="index"
        class="message-item"
        @click="openChat(index)"
      >
        <img :src="message.avatar" alt="头像" class="avatar" />
        <div class="message-info">
          <div class="message-header">
            <span class="username">
              {{ message.username }}
              <span v-if="message.pinned" class="pinned">📌</span>
            </span>
          </div>
          <p class="message-preview">{{ message.preview }}</p>
        </div>
        <div class="right-info">
          <span class="time">{{ message.time }}</span>
          <div v-if="message.unread > 0" class="unread">
            {{ message.unread > 99 ? '99+' : message.unread }}
          </div>
        </div>
      </div>
    </van-list>

    <!-- 弹出菜单 -->
    <div v-if="showMenu" class="menu-popup">
      <div class="menu-item" @click="addFriend">加好友</div>
      <div class="menu-item" @click="createGroupChat">加群聊</div>
      <div class="menu-item" @click="createGroupChat">创建群聊</div>
      <div class="menu-item" @click="createChannel">创建小窝</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const messages = ref([
  {
    avatar: 'public/chat/role_hushinv_head.png',
    username: '陈茜',
    time: '昨天',
    preview: '你说得有道理，我是要尝试寻找人生的副线了。',
    unread: 1,
    pinned: false,
  },
  {
    avatar: 'public/chat/pet_mengxiaohei.png',
    username: '罗小黑',
    time: '08:15',
    preview: '明天见',
    unread: 0,
    pinned: false,
  },
  {
    avatar: 'public/chat/role_boy_friend_bg.png',
    username: '男朋友',
    time: '12:50',
    preview: '晚上一起看电影吧！',
    unread: 1,
    pinned: true, // 置顶
  },
  {
    avatar: 'public/chat/role_jichenv_head.png',
    username: '机车女',
    time: '09:30',
    preview: '你好啊',
    unread: 2,
    pinned: false,
  },
]);

const loading = ref(false);
const finished = ref(false);

const sortedMessages = computed(() => {
  return [...messages.value].sort((a, b) => {
    if (a.pinned && !b.pinned) return -1;
    if (!a.pinned && b.pinned) return 1;
    return 0;
  });
});

const onLoad = () => {
  loading.value = true;
  setTimeout(() => {
    messages.value.push({
      avatar: 'public/chat/role_baimaonan_head.png',
      username: '赵六',
      time: '8-20',
      preview: '好的',
      unread: 0,
      pinned: false,
    });
    loading.value = false;
    finished.value = true;
  }, 1000);
};

const openChat = (index: number) => {
  router.push(`/chat/${sortedMessages.value[index].username}`);
};

// 控制菜单显示隐藏
const showMenu = ref(false);
const toggleMenu = () => {
  showMenu.value = !showMenu.value;
};

// 菜单操作
const createGroupChat = () => {
  alert('创建群聊');
  showMenu.value = false;
};
const createChannel = () => {
  alert('创建频道');
  showMenu.value = false;
};
const addFriend = () => {
  alert('加好友/群');
  showMenu.value = false;
};
const scan = () => {
  alert('扫一扫');
  showMenu.value = false;
};

// 点击菜单外隐藏菜单
const handleClickOutside = (event: MouseEvent) => {
  const menu = document.querySelector('.menu-popup');
  const button = document.querySelector('.discover');
  if (
    menu &&
    !menu.contains(event.target as Node) &&
    button &&
    !button.contains(event.target as Node)
  ) {
    showMenu.value = false;
  }
};

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});
onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

<style scoped>
.messages-view {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 60px;
  position: relative;
}

/* 顶部栏，三等分布局 */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  height: 60px;
  box-sizing: border-box;
  position: relative;
}

/* 左右两侧宽度固定，保持相等 */
.bar-item.placeholder,
.bar-item.discover {
  width: 90px; /* 根据右侧内容宽度调节 */
  display: flex;
  align-items: center;
  user-select: none;
  color: #222;
  font-size: 16px;
  position: relative;
}

/* 隐藏左侧占位元素，但保留宽度 */
.bar-item.placeholder {
  visibility: hidden;
}

/* 中间标题 - 增大字号 */
.bar-item.title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 21px; /* 增大消息标题字号 */
  color: #223344;
  user-select: none;
}

/* 右侧放大镜和文字 */
.bar-item.discover {
  gap: 6px;
  cursor: pointer;
  justify-content: flex-end;
}

/* 图标样式 */
.icon-add {
  margin-right: 4px;
  stroke: #222;
  flex-shrink: 0;
}

/* 中间操作按钮区 - 水平均匀分布且与屏幕同宽 */
.top-actions {
  display: flex;
  justify-content: space-around; /* 均匀分布 */
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: #333;
  flex: 1; /* 让每个项目平均分配宽度 */
}

.action-item .icon {
  width: 50px;
  height: 50px;
  background: #f5f5f5;
  border-radius: 12px;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 在样式表中添加 */
.friend-text {
  font-size: 14.5px; /* 调整为需要的大小 */
}


/* 功能图标样式 */
.action-icon {
  transition: all 0.2s ease;
}

.action-item:hover .action-icon {
  stroke: #38f; /* 鼠标悬停时变色 */
  transform: scale(1.1); /* 轻微放大效果 */
}

/* 消息列表 */
.message-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  height: 72px;
  box-sizing: border-box;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ccc;
  margin-right: 12px;
  flex-shrink: 0;
}

.message-info {
  flex: 1;
  overflow: hidden;
}

.message-header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 4px;
  align-items: center;
  height: 45px;
}

.username {
  font-weight: 600;
  font-size: 16px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.pinned {
  margin-left: 6px;
  font-size: 14px;
  color: #ff4d4f;
}

.message-preview {
  font-size: 14px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 核心：开启相对定位，使 top 生效 */
  position: relative;
  top: -8px; /* 负值表示向上偏移，数值越大（如-3px），偏移越多 */
}

/* 右侧时间和未读消息红点 */
.right-info {
  position: relative;
  width: 50px;
  height: 72px;
  flex-shrink: 0;
  /* 核心：开启相对定位，使 top 生效 */
  position: relative;
  top: 1px; /* 负值表示向上偏移，数值越大（如-3px），偏移越多 */
}

.time {
  position: absolute;
  top: 10px;
  right: 0;
  font-size: 13px;
  color: #999;
  white-space: nowrap;
  
}

.unread {
  position: absolute;
  bottom: 12px;
  right: 0;
  min-width: 22px;
  padding: 0 6px;
  height: 18px;
  background: red;
  color: #fff;
  font-size: 12px;
  border-radius: 9px;
  text-align: center;
  line-height: 18px;
}

/* 弹出菜单样式 */
.menu-popup {
  position: absolute;
  top: 48px; /* 顶部栏下方 */
  right: 1px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  overflow: hidden;
  z-index: 1000;
  width: 100px;
}

.menu-item {
  padding: 12px 20px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: background 0.2s;
}

.menu-item:hover {
  background-color: #f5f5f5;
}
</style>
